<template>
  <div class="class-container">
    <!-- 导航栏 -->
     <!-- 导航栏 -->
     <van-nav-bar class="page-nav-bar" fixed title="预约管理">
    </van-nav-bar>
    <!-- 导航栏结束 -->
    <!-- 挂号列表 -->
    <div class="bookNum">

      <van-cell class="wait-people">
        <span>当前排队人数：{{userBookList.length}}人</span>
        <span>下一位： <b>{{userBookList[0].sort}}</b> 号</span>
      </van-cell>
    </div>
    <div class="book-message">
      <van-cell>挂号列表：</van-cell>

      <van-cell center   v-for="(item) in userBookList" :key="item.id">
        <p slot="title">姓名：{{item.userName}}</p>
        <p slot="label">号码:{{item.sort}}</p>
        <p slot="label">医生:{{item.docName}}</p>
        <van-button @click="delUserBook(item.id)">删除号码</van-button>
        <!-- <van-button @click="updateUserBook(item.id)">修改信息</van-button> -->
        <p slot="label">挂号时间:{{item.createTime | relativeTime}}</p>
        <p slot="label">预计等待:{{ item.waitingTime }}分钟</p>
       </van-cell>

      </div>
      <van-popup v-model="show ">
        <van-form @submit="onSubmit">
        <van-field
          v-model="hh"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="cc"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form></van-popup>

      <!-- <van-form @submit="onSubmit">
        <van-field
          v-model="item.docName"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form> -->
      <van-submit-bar button-color="blue" button-text="下一位"  @submit="nextPeople"/>

</div>
</template>

<script>

// import ManageNext from './components//manageNext.vue'
import { WaitingNumber, delNumber } from '@/api/user'
import { mapState } from 'vuex'
import { Dialog } from 'vant'
import dayjs from 'dayjs'

export default {
  name: 'HomeIndex',
  components: {
    // ManageNext
  },
  data () {
    return {
      // show: true, // 修改信息弹出层
      activeName: '1',
      // departmentList: []
      // 用户挂号列表
      userBookList: [],
      firstId: 0, // 每次删除第一个人的id
      hh: 11,
      cc: 22
    }
  },
  created () {
    this.loadDepartment()
    // this.dayTime()
  },
  methods: {
    // 获取用户挂号列表
    async  loadDepartment () {
      const { data: { data: res } } = await WaitingNumber()
      this.userBookList = res
      // console.log(this.userBookList[0].id)
      this.firstId = this.userBookList[0].id
      console.log(this.userBookList)
    },
    dayTime () {

    },
    async nextPeople () {
      try {
        const delId = this.firstId
        const res = await delNumber(delId)
        this.$router.go(0)
        this.loadDepartment()
        console.log(res)
      } catch (error) {
        this.$toast.fail('没有人挂号啦')
      }
    },
    // 管理员手动删除
    async delUserBook (val) {
      try {
        await delNumber(val)
        Dialog.confirm({
          title: '删除提示',
          message: '确认删除吗？'
        })
          .then(() => {
            // on confirm
            this.$router.go(0)
          })
          .catch(() => {
            // on cancel
          })
      } catch (error) {

      }
    },
    // 管理员修改信息
    updateUserBook (id) {
      console.log(id)
    },
    // 修改信息的提交时间
    onSubmit () {
      console.log(1)
    }
  },

  computed: {
    ...mapState(['userinfo'])

  }
}
</script>

<style lang="less" scoped>
.class-container {
  padding-top: 50px;
  padding-bottom: 50px;
  .van-nav-bar {
    background-color: #3926fa;
    .van-nav-bar__title {
      max-width: unset;
    }
  }
  .search-btn {
    width: 200px;
    height: 32px;
    background-color: #5babfb;
    border: none;
    font-size: 17px;
    .van-icon {
      font-size: 20px;
      color: white;
    }
  }
  .book-message {
    height: 70vh;
    overflow-y:scroll ;
    .wait-people {

      width: 100%;
      }

  }
 .van-swipe-cell__right {
    top: 70px;
  }
  .bookNum {
    .wait-people span:last-child{
      float: right;
    }
    .wait-people span:last-child b {
      color: red;
    }
  }
  .van-submit-bar {
    bottom: 70px;
  }

}

</style>
